var Gr0wl = {};

Gr0wl.Base = new Class({
    options: {
        image: 'images/growl.jpg',
        title: $('jc_wel').value,
        text: $('jc_say').value,
        duration: 2
    },

    initialize: function(image) {
        this.image = new Asset.image(image, { onload: this.create.bind(this) });
        return this.show.bind(this);
    },

    create: function(styles) {
        this.image.setStyles('position:absolute;display:none').setOpacity(0).injectInside(document.body);
        this.block = new Element('div').setStyles('position:absolute;display:none;z-index:999;color:#fff;font: 12px/14px "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;' + styles.div).setOpacity(0).injectInside(document.body);
        new Element('img').setStyles(styles.img).injectInside(this.block);
        new Element('h3').setStyles(styles.h3).injectInside(this.block);
        new Element('p').setStyles(styles.p).injectInside(this.block);
    },

    show: function(options) {
        options = $merge(this.options, options);
        var elements = [this.image.clone(), this.block.clone()];
        elements.each(function(e, i) {
            e.injectInside(document.body);
            e.setStyles(options.position);
            if (i) e.getFirst().setProperty('src', options.image).getNext().setHTML(options.title).getNext().setHTML(options.text);
        });
        new Fx.Elements(elements, {duration:400}).start({
            '0': { 'opacity': 0.75 }, '1': { 'opacity': 1 }
        });
        this.hide.delay(options.duration * 1000, this, [elements]);
    },

    hide: function(elements, effect) {
        var effects = new Fx.Elements(elements, {duration:400, onComplete: function() {
            this.elements[0].remove();
            this.elements[1].empty().remove();
        }}).start({'0': effect, '1': effect });
    }

});


Gr0wl.Smoke = Gr0wl.Base.extend({

    create: function() {
        this.queue = [];
        this.parent({
            div: 'width:298px;height:73px;',
            img: 'float:left;margin:12px;',
            h3: 'margin:0;padding:10px 0px;font-size:13px;',
            p: 'margin:0px 10px;font-size:12px;'
        });
    },

    show: function(options) {
        var last = this.queue.getLast(),
                delta = window.getScrollTop() + 10 + (last * 83);
        options.position = {'top':delta + 'px', 'left':'10px', 'display':'block'};
        this.queue.push(last + 1);
        this.parent(options);
    },

    hide: function(elements) {
        this.queue.shift();
        this.parent(elements, { 'opacity': 0 });
    }

});

var Growl = function(options) {
    if (Growl[options.type]) Growl[options.type].call(options);
    else Growl.Smoke(options);
};

window.addEvent('domready', function() {
    Growl.Smoke = new Gr0wl.Smoke('images/smoke.png');
});
$('jcwelcome').onclick = function() {
    Growl.Smoke({
        title: '<font face="Monotype Corsiva" size=6 color=green><b>' + $('jc_wel').value + '</b></font>',
        text: '<font color=blue>' + $('jc_say').value + '</font>'
    });
    return false;
};